<template>
  <Main :data="listData" :footer-lock="false" :span-method="SpanMethod">
    <el-table-column
      label="消息类型"
      align="center"
      property="type"
    ></el-table-column>

    <el-table-column
      label="推送节点"
      align="center"
      property="node"
    ></el-table-column>
    <el-table-column
      label="推送规则"
      align="center"
      property="rules"
    ></el-table-column>
    <el-table-column label="后台消息推送" align="center">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.statusMsg"
          active-color="#13ce66"
          inactive-color="#909399"
          @change="switchChang()"
        >
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column align="center">
      <template slot="header">
        门店管理员短信通知&nbsp;&nbsp;
        <el-tooltip
          effect="dark"
          content="短信通知功能暂时免费，后期根据短信条数数量进行更改收费规则"
          placement="top"
        >
          <i class="el-icon-warning" style="font-size:14px;"></i>
        </el-tooltip>
      </template>
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.statusSMS"
          active-color="#13ce66"
          inactive-color="#909399"
          @change="switchChang()"
        >
        </el-switch>
      </template>
    </el-table-column>
  </Main>
</template>
<script>
export default {
  data() {
    return {
      listData: [
        {
          type: "订单待支付提醒",
          node: "订单提交",
          rules: "线上支付订单提交成功，等待支付",
          statusMsg: false,
          statusSMS: false
        },
        {
          type: "待发货提醒",
          node: "线上支付成功，待发货提醒",
          rules: "线上支付订单支付成功时，立即提醒",
          statusMsg: false,
          statusSMS: false
        },
        {
          type: "待发货提醒",
          node: "拼团待发货订单提醒",
          rules: "拼团成功之后发送",
          statusMsg: false,
          statusSMS: false
        },
        {
          type: "待发货提醒",
          node: "自提订单支付成功",
          rules: "自提订单线上支付成功",
          statusMsg: false,
          statusSMS: false
        },
        {
          type: "待发货提醒",
          node: "转单成功通知",
          rules: "订单转单成功至门店之后发送",
          statusMsg: false,
          statusSMS: false
        },
        {
          type: "订单取消提醒",
          node: "订单被买家取消通知",
          rules: "订单被买家取消时，立即提醒",
          statusMsg: false,
          statusSMS: false
        },
        {
          type: "订单取消提醒",
          node: "订单自动取消通知",
          rules: "订单超时未支付被系统自动取消后，立即提醒",
          statusMsg: false,
          statusSMS: false
        },
        {
          type: "确认收货提醒",
          node: "订单买家确认收货通知",
          rules: "买家确认收货后，立即提醒",
          statusMsg: false,
          statusSMS: false
        },
        {
          type: "确认收货提醒",
          node: "订单确认收货",
          rules: "系统确认收货",
          statusMsg: false,
          statusSMS: false
        },
        {
          type: "待处理维权提醒",
          node: "买家申请维权",
          rules: "买家申请退款",
          statusMsg: false,
          statusSMS: false
        },
        {
          type: "待处理维权提醒",
          node: "买家申请维权",
          rules: "买家申请退货退款",
          statusMsg: false,
          statusSMS: false
        },
        {
          type: "待处理维权提醒",
          node: "买家已退货，待退款",
          rules: "买家已退货待退款",
          statusMsg: false,
          statusSMS: false
        },
        {
          type: "新增会员提醒",
          node: "会员卡开卡通知",
          rules: "客户成功激活会员卡，立即提醒",
          statusMsg: false,
          statusSMS: false
        },
        {
          type: "物流单异常提醒",
          node: "物流单异常提醒",
          rules: "第三方物流发单时，物流单异常/被取消时",
          statusMsg: false,
          statusSMS: false
        },
        {
          type: "新增评价提醒",
          node: "新增评价提醒",
          rules: "商品新评价提醒",
          statusMsg: false,
          statusSMS: false
        },
        // { type: '预约到店消息', node: '预约成功通知', rules: '客户提交预约，立即提醒', statusMsg: false, statusSMS: false },
        // { type: '预约到店消息', node: '预约成功通知', rules: '客户提交预约，立即提醒', statusMsg: false, statusSMS: false },
        // { type: '预约到店消息', node: '预约成功通知', rules: '客户提交预约，立即提醒', statusMsg: false, statusSMS: false },
        {
          type: "预约到店消息",
          node: "预约成功通知",
          rules: "客户提交预约，立即提醒",
          statusMsg: false,
          statusSMS: false
        }
      ],
      resultArr: [],
      resultArrIdx: []
    };
  },
  created() {
    this.trans(this.listData);
  },
  methods: {
    async switchChang() {},
    trans(arr) {
      let result = [];
      let resultIdx = [];
      let num = 1;
      arr.forEach((e, i) => {
        if (i === arr.length - 1) {
          if (e.type !== arr[i - 1].type) {
            let json = {};
            json[e.type] = 1;
            result.push(json);
            resultIdx.push(i);
          }
          // else {
          //   result[result.length - 1][e.type] += 1
          // }
          return;
        }

        if (e.type === arr[i + 1].type) {
          num++;
        } else {
          let json = {};
          json[e.type] = num;
          result.push(json);
          resultIdx.push(i);
          num = 1;
        }
      });
      this.resultArr = result;
      this.resultArrIdx = resultIdx;
    },
    SpanMethod({ row, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let json = {};
        let ridx = 0;
        this.resultArr.some(ele => {
          for (let key in ele) {
            if (row.type === key) {
              json.rowspan = ele[key];
              json.colspan = 1;
              return true;
            }
          }
        });
        this.resultArrIdx.some(ele => {
          if (rowIndex === ele + 1) {
            ridx = rowIndex;
            return true;
          }
        });
        if (rowIndex === ridx) {
          return json;
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
};
</script>
